.box-chat{
  width: 100vw;
  height: 100vh;
}

.app-container {
  width: 100vw;
  height: 95%;
  font-family: Arial, sans-serif;
  max-width: 37.5rem; /* 600px / 16px = 37.5rem */
  // margin: 1.25rem auto; /* 20px / 16px = 1.25rem */
  background-color: #f0f0f0;
  // padding: 1.25rem; /* 20px / 16px = 1.25rem */
  // box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); /* 10px / 16px = 0.625rem */
  // border-radius: 0.625rem; /* 10px / 16px = 0.625rem */
}

.chat-container {
  display: flex;
  height: 35rem;
  flex-direction: column;
  // height: 30rem; /* 400px / 16px = 25rem */
  overflow-y: auto;
  overflow: hidden;
  overflow: scroll;
}

.message {
  max-width: 70%; /* 控制消息框的最大宽度 */
  // margin-bottom: 0.625rem; /* 10px / 16px = 0.625rem */
  // padding: 0.625rem; /* 10px / 16px = 0.625rem */
  border-radius: 0.5rem; /* 8px / 16px = 0.5rem */
}

.sent {
  align-self: flex-end;
  background-color: #007bff;
  color: #fff;
}

.received {
  align-self: flex-start;
  background-color: #e9f0f6;
  color: #333;
}

.messageInput {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 0.625rem 0; /* 10px / 16px = 0.625rem */
  border-top: 0.0625rem solid #ccc; /* 1px / 16px = 0.0625rem */
}

.messageInput input[type="text"] {
  width: 60%;
  padding: 0 1rem;
  margin-left: 1rem;
  padding: 0.625rem 0; /* 10px / 16px = 0.625rem */
  border: 0.0625rem solid #ccc; /* 1px / 16px = 0.0625rem */
  border-radius: 1.25rem; /* 20px / 16px = 1.25rem */
  font-size: 1rem; /* 16px / 16px = 1rem */
  outline: none;
}

.messageInput button {
  margin-left: 0.625rem; /* 10px / 16px = 0.625rem */
  padding: 0.625rem 1.25rem; /* 10px / 16px = 0.625rem, 20px / 16px = 1.25rem */
  border: none;
  border-radius: 1.25rem; /* 20px / 16px = 1.25rem */
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  font-size: 1rem; /* 16px / 16px = 1rem */
  transition: background-color 0.3s ease;
}

.messageInput button:hover {
  background-color: #0056b3;
}

.messageInput button:active {
  background-color: #003c6e;
}

